<template>
	<div class="list-box">
		<div class="pannel-title pannel-between">
			<div>技术文章列表</div>
		</div>
		<div class="line"></div>
		<div class="pannel-tabs">
			<a-tree-select @change="onChangeRef" :replaceFields="{ children: 'children', title: 'name', key: 'id', value: 'id' }" :tree-data="cateIds" placeholder="请选择分类"></a-tree-select>
			<a-input-search style="width: 200px; margin: 3px 20px" v-model:value="pages.keywords" placeholder="请输入关键词搜索" enter-button="搜索" @search="onSearch" />
			<a-button type="primary" class="right-btn" @click="createBug">+ 新增</a-button>
		</div>
		<div class="data-table">
			<a-table :columns="columns" :row-key="(record) => record.id" :data-source="dataSource2" :pagination="pages" :loading="isLoading" @change="changePage">
				<template #action="{ record }">
					<a style="margin-right: 5px" title="预览" @click="showHtm(record.id)"><img src="@/assets/images/yulan.png" /></a>
					<a title="编辑" style="margin-right: 5px">
						<router-link :to="{ path: '/technicalArticleAdd', query: { id: record.id } }"><img src="@/assets/images/cz-edit.png" /></router-link>
					</a>
					<a v-if="record.is_del == 'N'" @click="deleteMenu(record)" title="删除"><img src="@/assets/images/cz-delete.png" /></a>
					<!-- <a v-if="record.is_del == 'Y'" >已删除</a> -->
				</template>
				<template #isHide="{ record }">
					<a-tag v-if="record.is_del === 'Y'" color="error"><template #icon><close-circle-outlined /></template>已删除</a-tag>
					<a-tag v-else-if="record.is_hide === 'Y'" color="#cccccc">隐藏</a-tag>
					<a-tag v-else-if="record.is_hide === 'N'" color="#2db7f5">显示</a-tag>
				</template>
			</a-table>
		</div>
		<!-- 遮罩弹框 -->
		<div class="htm" v-if="isShowHtm">
			<div class="title">
				<p>
					{{ formState.title }}
					<span @click="closeHtm">
						<svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
							<path
								d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
							></path>
						</svg>
					</span>
				</p>
			</div>
			<div class="htm-body" v-html="formState.content"></div>
		</div>
	</div>
</template>
<script>
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal, Button, Input, TreeSelect, Tag } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
import baseUtil from "@/util/baseUtil";
import { CloseCircleOutlined } from "@ant-design/icons-vue";
export default {
	components: {
		ATable: Table,
		ATreeSelect: TreeSelect,
		AButton: Button,
		AInputSearch: Input.Search,
		ATag:Tag,
		CloseCircleOutlined
	},
	setup() {
		const store = useStore();
		//text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
		store.dispatch("setBreadcrumb", {
			text: "技术文章管理 / 技术文章列表",
			isBack: false,
		});
		const dataSource2 = ref([]);
		const columns = reactive([
			{
				title: "文章标题",
				dataIndex: "title",
				key: "title",
			},
			{
				title: "作者",
				dataIndex: "author",
				key: "author",
			},
			{
				title: "排序序号",
				dataIndex: "display_priority",
				key: "display_priority",
			},
			{
				title: "状态",
				dataIndex: "is_hide",
				key: "is_hide",
				align:"center",
				slots: { customRender: "isHide" },
			},
			{
				title: "操作",
				key: "action",
				slots: { customRender: "action" },
			},
		]);
		const pages = ref({
			keywords: "",
			cateId1: 0,
			cateId2: 0,
			status: "",
			current: 1,
			pageSize: 10,
			total:0
		});
		/**
		 * tree
		 */
		return {
			pages,
			dataSource2,
			columns,
			isLoading: ref(false),
			cateIds: ref([]),
		};
	},
	data() {
		return {
			isShowHtm: false,
			formState: {},
			active: "Tech",
		};
	},
	mounted() {
		httpRequest.post("获取文章分类集合", { level: "1", type: "Tech" }).then((res) => {
			this.cateIds = baseUtil.GetByTree(res.data);
			this.cateIds.push({ name: "全部", id: 0 });
		});
		this.getList();
	},
	updated() {
		if (this.$route.query.type) {
			this.active = this.$route.query.type;
		}
	},
	methods: {
		getList() {
			this.isLoading = true;
			httpRequest
				.post("获取技术文章列表",{...this.pages,page:this.pages.current})
				.then((res) => {
					this.dataSource2 = res.data.data;
					this.pages.total = res.data.total;
				})
				.finally(() => {
					this.isLoading = false;
				});
		},
		changePage(e){
			this.pages.current = e.current;
			this.getList();
		},
		deleteMenu(item) {
			Modal.confirm({
				title: "系统提示",
				content: "确认删除技术文章？",
				okText: "确认",
				cancelText: "取消",
				onOk: () => {
					return new Promise((res) => {
						httpRequest
							.post("删除技术文章", { id: item.id })
							.then(() => {
								message.success("删除技术文章成功！");
								this.getList();
							})
							.catch(() => {
								message.warning({ content: "删除技术文章失败", key: "error" });
							})
							.finally(() => {
								this.isLoading = false;
								res();
							});
					});
				},
			});
		},
		createBug() {
			sessionStorage.setItem("displayPriority",this.pages.total);
			this.$router.push("/technicalArticleAdd");
		},
		onChangeRef(v, lab, ext) {
			console.log("v:", v);
			console.log("lab:", lab);
			let teg = ext.triggerNode.dataRef;
			if (teg.pid != 0) {
				this.pages.cateId1 = teg.pid;
				this.pages.cateId2 = teg.id;
			} else {
				this.pages.cateId1 = teg.id;
				this.pages.cateId2 = 0;
			}
			this.getList();
		},
		onSearch(v) {
			this.pages.keywords = v;
			this.getList();
		},
		showHtm(id) {
			httpRequest.post("获取技术文章详情", { id: id }).then((res) => {
				this.formState = { ...baseUtil.LineToHump(res.data) };
				this.isShowHtm = true;
			});
		},
		closeHtm() {
			this.isShowHtm = false;
		},
	},
};
</script>
<style lang="less" scoped>
.line {
	width: 100%;
	margin: 20px 0;
	border-top: 1px solid #eee;
}
.pannel-tabs {
	width: 100%;
	height: 40px;
	line-height: 39px;
	border-bottom: 1px solid #f1f1f1;
	text-align: left;
	// display:flex;
	margin-bottom: 10px;
	a {
		color: #666;
		display: inline-block;
		height: 40px;
		border: 1px solid #f1f1f1;
		background: #f8f8f8;
		border-bottom: 1px solid transparent;
		padding: 0 15px;
		border-radius: 4px 4px 0 0;
		margin-right: 3px;
		&:hover {
			color: #378ef0;
		}
		&.active {
			color: #378ef0;
			background: #fff;
			border-bottom-color: #fff;
		}
	}
	.right-btn {
		float: right;
	}
}
</style>
